<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        h1 {
            font-size: 25px;
        }
        .warp {
            position: relative;
            margin: 120px auto;
            width: 300px;
            height: 278px;
            background-color: #0290db;
            color: white;
            text-align: center;
        }
        .warp span {
            display: inline-block;
            width: 70px;
            margin-right: 10px;
            text-align: right;
        }
        .log {
            position: absolute;
            top: 78px;
            width: 100%;
            height: 200px;
            box-sizing: border-box;
            padding: 20px;
        }
        .zc {
            display: none;
        }
        .warp input {
            width: 130px;
            height: 25px;
            margin-bottom: 10px;
            border: 1px solid #cccccc;
        }
        .btn {
            margin-bottom: 0;
            margin-top: 20px;
            border: none;
            background-color: white;
            color: #025da4;

        }
        .tab {
            width: 100%;
            height: 45px;
            display: flex;
            margin-bottom: 10px;
        }
        .tab button {
            width: 50%;
            border: none;
            background-color: #0290db;
            color: white;
        }
        .tab button:nth-child(2){
            background-color: #026dae;
        }
    </style>
</head>
<body>
<div class="warp">
    <div class="tab">
        <button>登陆</button>
        <button>注册</button>
    </div>
    <h1>欢迎登陆图书管理系统</h1>
    <div class="logs">
        <div class="log login">
            <p><span>用户名:</span><input type="text" id="user" name="username"></p>
            <p><span>密 码:</span><input type="password" id="pwd" name="password"></p>
            <p><input class="btn" type="button" id="btn" value="登陆"></p>
        </div>
        <div class="log zc">
            <p><span>用户名:</span><input type="text" id="user2" name="username"></p>
            <p><span>密 码:</span><input type="password" id="pwd2" name="password"></p>
            <p><span>确认密码:</span><input type="password" id="_pwd2"></p>
            <p><input class="btn" type="button" id="btn2" value="注册"></p>
        </div>
    </div>
</div>
</body>
<script src="../js/jquery-1.11.1.min.js"></script>
<script src="../js/books.js"></script>
<script>

    //查重数组;
    var arr = [];
    $.ajax({
        url:'http://localhost:2403/users',
        type:'get',
        success:function (data) {
            for (var i in data){
                arr.push(data[i].username);
            }
        }
    });

    //tab切换;
    $('.tab button').on('click',function () {
        $(this).css('background','#0290db').siblings().css('background','#026dae');
        $('.logs div').eq($(this).index()).css('display','block').siblings().css('display','none');
    });

    //登陆按钮点击事件;
    $('#btn').on('click',function () {
        var obj = {
            username:$('#user').val(),
            password:$('#pwd').val()
        };
        $.ajax({
            type:'post',
            url:'http://localhost:2403/users/login',
            data:obj,
            success:function (data) {
                localStorage.setItem('userUid',data.uid);
                location.href = '../index.html'
            },
            error:function (err) {
                if (err.status == 401){
                    alert('账号密码错误');
                }
            }
        });
    });

    //注册按钮点击事件;
    $('#btn2').on('click',function () {
        if (arr.indexOf($('#user2').val()) == -1){
            if ($('#user2').val() != '' && $('#pwd2').val() != ''){
                if ($('#pwd2').val() == $('#_pwd2').val()){
                    var obj = {
                        username:$('#user2').val(),
                        password:$('#pwd2').val()
                    };
                    $.ajax({
                        type:'post',
                        url:'http://localhost:2403/users',
                        data:obj,
                        success:function (data) {
                            alert('注册成功');
                            location.href = 'login.html'
                        },
                        error:function (err) {
                            if (err.status == 401){
                                alert('注册失败');
                            }
                        }
                    });
                }else {
                    alert('两次输入密码不一致');
                }
            }else {
                alert('账号密码不能为空')
            }
        }else {
            alert('用户名已存在');
        }
    });



</script>
</html>